<template>
    <div class="goods">
        <div class="search">
            <div class="sort">
            <div :class='tabIndex===1 ? "active":"noActive"' @click="clickHandle(1)">综合</div>
            <div @click="clickHandle(2)" :class='tabIndex===2 ? "active":"noActive"'>销量</div>
            <div class="sort-price">
                <div @click="clickHandle(3)" :class='tabIndex===3 ? "active":"noActive"'>价格</div>
                <div class="price">
                    <div :class='tabIndex===3&&priceSort===true ? "active":"noActive"'>
                        <van-icon name="arrow-up" size="12px"/>
                    </div>
                    <div  :class='tabIndex===3&&priceSort===false ? "active":"noActive"'>
                        <van-icon name="arrow-down" size="12px"/>
                    </div>
                </div>
            </div>
            <div @click="clickHandle(4)" :class='tabIndex===4 ? "active":"noActive"'> 上新</div>
        </div>
        </div>
    </div>
</template>

<script>
import Vue from 'vue';
import { getGoodsList } from "@/api/goods.js";
import { Search,Toast ,Sticky,Icon, CellGroup} from 'vant';

Vue.use(Search);
Vue.use(Sticky);
Vue.use(Icon);
import GoodItem from 'components/goods/GoodItem.vue'
export default {
   data() {
      return {
          goodslist:[],
          tabIndex:1,
          priceSort:true
      }
   },
   components:{
       GoodItem
   },
   created(){
       this.getGoods();
   },
   computed:{
   },
   methods:{
     
    async getGoods(params) {
      let rs = await getGoodsList(params);
      this.goodslist = rs.data;
      console.log(this.goodslist);
    },
    //点击排序
    clickHandle(val){
        switch(val){
            case 1:
                this.tabIndex=1
                 this.getGoods({
                })
                break;
            case 2:
                this.tabIndex=2
                this.getGoods({
                    _sort:"sales",
                    _order:"desc"
                })
                break;
            case 3:
                this.tabIndex=3
                
                this.priceSort =!this.priceSort
                if(this.priceSort){
                    this.getGoods({
                    _sort:"marketPrice",
                    _order:"asc"
                })
                }else{
                    this.getGoods({
                    _sort:"marketPrice",
                    _order:"desc"
                })
                }
                break;
            case 4:
                this.tabIndex=4
                this.getGoods({
                    _sort:"newgoods",
                    _order:"desc"
                })
                break;
        }
    }
   },

}
</script>

<style lang="stylus" scoped>
@import '~assets/border.styl'
    .goods
        background #f7f8fa
        position relative
        .search
            background #fff
            z-index 999
            width 100%
        .sort
            display flex
            align-items center
            justify-content center
            height .44rem
            background #fff
            $border(1px 0 0 0, #eee)
            div
                flex 1
                text-align center
            .sort-price
                display flex
                align-items center
                .price
                    text-align left
.active 
    color #c9b078
.noActive
    color #000
</style>
